<template>
  <div class="header">
    <div class="lang-wrapper">
      <ul class="country-wrapper">
        <li v-for="(item,ind) in countries"
            :key="ind"
            class="country"
            @click="selectLanguage(item.lang ,ind)">
          <img :src="item.img"
               :class="[Num ==ind?'borActive':'']" />
        </li>
      </ul>
      <!-- <span class="pull"
            @click="pull"><img src="./1.png"
             alt=""
             style="width:30px;height:30px"></span> -->
    </div>

    <slideshow v-if="falg"></slideshow>

    <div class="father">
      <!-- <div class="content-wrapper">
        <div class="avatar">
          <img :src="seller.shoplogo"
               alt=""
               width="64"
               height="64">
        </div>
        <div class="content">
          <div class="title">
            <span class="name">{{seller.shopname}}</span>
          </div>
        </div>
      </div> -->
      <div class="background">
        <!-- <img src="../../../static/imgs/bg.jpg"
           width="100%"
           height="100%"> -->
      </div>
    </div>
  </div>
</template>

<script>
import bus from '../../store/bus.js'
import slideshow from './../header/swiper'
export default {
  name: 'header',
  components: {
    slideshow,
  },
  props: {
    seller: {
      type: Object
    },
    max: {
      type: String
    },
    intervaltime: {
      type: String
    },
    goodsnation: {
      type: String,
    },
  },
  data () {
    return {
      list_top: {
        good_top: 100,
        shopcart: 200,
        shopcart_menu: 200,
      },
      introduction_goods: [],
      Num: 0,
      jackfalg: [{
        name: 'Germany',
        img: require('../../../static/imgs/germany.jpg'),
        lang: 'local'
      },
      {
        name: 'Germany',
        img: require('../../../static/imgs/germany.jpg'),
        lang: 'de'
      },
      {
        name: 'China',
        img: require('../../../static/imgs/china.jpg'),
        lang: 'zh-CN'
      },
      {
        name: 'America',
        img: require('../../../static/imgs/america.jpg'),
        lang: 'en'
      },
      {
        name: 'Denmark',
        img: require('../../../static/imgs/Denmark.jpg'),
        lang: 'da'
      }, {
        name: 'French',
        img: require('../../../static/imgs/French.jpg'),
        lang: 'fr'
      }, {
        name: 'Netherlands',
        img: require('../../../static/imgs/Netherlands.jpg'),
        lang: 'af'
      }, {
        name: 'Portugal',
        img: require('../../../static/imgs/Portugal.jpg'),
        lang: 'pt'
      }, {
        name: 'Spain',
        img: require('../../../static/imgs/Spain.jpg'),
        lang: 'es'
      }, {
        name: 'Sweden',
        img: require('../../../static/imgs/Sweden.jpg'),
        lang: 'sv'
      }, {
        name: 'Italy',
        img: require('../../../static/imgs/Italy.jpg'),
        lang: 'it'
      }],
      countries: [

      ],
      nationalflag: [],
      detailShow: false,
      classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
      falg: true,
      language: { German: 'Klicken Sie, um zum Menü zurückzukehren', China: '点击返回菜单', English: 'Click to return to the menu', Italy: 'Fare clic per tornare al menu' }
    }

  },
  watch: {
    goodsnation: {
      immediate: true,
      handler (val) {
        this.nationalflag = val.split(",")
        for (let i = 0; i < this.nationalflag.length; i++) {
          for (let j = 0; j < this.jackfalg.length; j++) {
            if (this.nationalflag[i] == this.jackfalg[j].lang) {
              this.introduction_goods.push(this.jackfalg[j].lang)
              this.countries.push(this.jackfalg[j])
            }
          }
        }
        this.$i18n.locale = this.introduction_goods[0];
        bus.$emit("shopcatr_type",this.introduction_goods[0], 0);
        this.$emit("plant", this.introduction_goods);
      }
    }
  },

  created () {
   
    // if (navigator.language.indexOf("zh") >= 0) {
    //   this.Num = 1
    // } else if (navigator.language.indexOf("de") >= 0) {
    //   this.Num = 0
    // } else if (navigator.language.indexOf("en") >= 0) {
    //   this.Num = 2
    // } else if (navigator.language.indexOf("it") >= 0) {
    //   this.Num = 3
    // } else {
    //   this.Num = 0
    // }

  },
  methods: {

    selectLanguage (lang, ind) {
      this.Num = ind
      bus.$emit("shopcatr_type",lang, ind);
      bus.$emit("send", this.language.German);
      bus.$emit("send", this.language.China);
      bus.$emit("send", this.language.English);
      bus.$emit("send", this.language.Italy);
      this.$emit("Num", ind)
      this.$i18n.locale = lang


    },
    pull () {
      if (this.falg) {
        this.falg = false
      } else {
        this.falg = true
      }

    }
  },

  mounted () {
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin';

.header {
  position: relative;
  color: #fff;
  overflow: hidden;

  .lang-wrapper {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 46px;

    .country-wrapper {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translate(-50%);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .country {
        // height: 30px;
        // width: 40px;
        // float: left;
        padding-left: 3px;
        padding-right: 3px;

        img {
          height: 26px;
          width: 35px;
          background-size: 100% 100%;
        }
      }
    }
  }

  .content-wrapper {
    position: relative;
    display: flex;
    padding: 12px 20px;
    font-size: 0;
    box-shadow: 10px 10px 5px #888888;
    box-shadow: darkgrey 0px 0px 30px 5px;
    box-shadow: #a9a9a9 0px 1px 9px;

    .avatar {
      flex: 0 0 64px;
      height: 64px;
      border: 2px solid #fff;
      border-radius: 8px;
      box-shadow: 1px 1px 5px #888888;

      img {
        border-radius: 8px;
      }
    }

    .content {
      flex: 1;
      margin-left: 16px;

      .title {
        margin: 0px 0 8px 0;

        .brand {
          display: inline-block;
          vertical-align: top;
          width: 30px;
          height: 18px;
          bg-image('brand');
          background-size: 30px 18px;
          background-repeat: no-repeat;
        }

        .name {
          margin-left: 6px;
          font-size: 20px;
          line-height: 18px;
          font-weight: bold;
          color: #000;
        }
      }

      .support {
        .icon {
          vertical-align: top;
          display: inline-block;
          width: 12px;
          height: 12px;
          margin-right: 4px;
          background-size: 12px 12px;
          background-repeat: no-repeat;

          &.decrease {
            bg-image('decrease_1');
          }

          &.discount {
            bg-image('discount_1');
          }

          &.guarantee {
            bg-image('guarantee_1');
          }

          &.invoice {
            bg-image('invoice_1');
          }

          &.special {
            bg-image('special_1');
          }
        }

        .text {
          line-height: 12px;
          font-size: 10px;
        }
      }
    }

    .support-count {
      position: absolute;
      right: 12px;
      bottom: 14px;
      padding: 0 8px;
      height: 24px;
      line-height: 24px;
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.2);

      .count {
        vertical-align: top;
        font-size: 10px;
      }

      .icon-keyboard_arrow_right {
        margin-left: 2px;
        line-height: 24px;
        font-size: 10px;
      }
    }
  }

  .background {
    position: absolute;
    top: 184px;
    left: 0;
    width: 100%;
    height: 42%;
    z-index: -1;
  }

  .detail {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    transition: all 0.5s;
    background: rgba(7, 17, 27, 0.8);
    backdrop-filter: blur(10px);

    &.fade-enter-active, &.fade-leave-active {
      opacity: 1;
      background: rgba(7, 17, 27, 0.8);
    }

    &.fade-enter, &.fade-leave-to {
      opacity: 0;
      background: rgba(7, 17, 27, 0);
    }

    .detail-wrapper {
      min-height: 100%;
      width: 100%;

      .detail-main {
        margin-top: 64px;
        padding-bottom: 64px;

        .name {
          line-height: 16px;
          text-align: center;
          font-size: 16px;
          font-weight: 700;
        }

        .star-wrapper {
          margin-top: 18px;
          padding: 2px 0;
          text-align: center;
        }

        .title {
          display: flex;
          width: 80%;
          margin: 28px auto 24px auto;

          .line {
            flex: 1;
            position: relative;
            top: -6px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          }

          .text {
            padding: 0 12px;
            font-size: 14px;
            font-weight: 700;
          }
        }

        .supports {
          width: 80%;
          margin: 0 auto;

          .support-item {
            padding: 0 12px;
            margin-bottom: 12px;
            font-size: 0;

            &:last-child {
              margin-bottom: 0;
            }

            .icon {
              display: inline-block;
              width: 16px;
              height: 16px;
              vertical-align: top;
              margin-right: 6px;
              background-size: 100% 100%;
              background-repeat: no-repeat;

              &.decrease {
                bg-image('decrease_2');
              }

              &.discount {
                bg-image('discount_2');
              }

              &.guarantee {
                bg-image('guarantee_2');
              }

              &.invoice {
                bg-image('invoice_2');
              }

              &.special {
                bg-image('special_2');
              }
            }

            .text {
              line-height: 16px;
              font-size: 12px;
            }
          }
        }

        .bulletin {
          width: 80%;
          margin: 0 auto;

          .content {
            padding: 0 12px;
            line-height: 24px;
            font-size: 12px;
            text-align: justify;
          }
        }
      }
    }

    .detail-close {
      position: relative;
      width: 32px;
      height: 32px;
      margin: -64px auto 0 auto;
      clear: both;
      font-size: 32px;
    }
  }
}

.msg-show .person-show span {
  float: left;
  margin-right: 4px;
  display: none;
  width: 13px;
  height: 15px;
}

.father {
  position: relative;
  background: #fff;
}

.header .lang-wrapper {
  background: url('../../../static/imgs/headerbag.png');
  background-size: 100% 100%;
}

.borActive {
  border: 2px solid #fff;
}
</style>
